<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2024-07-15 22:25:53
 * @LastEditors: zhengjingjing 1742420988@qq.com
 * @LastEditTime: 2024-11-14 11:15:51
 * @FilePath: \greencity-ui\src\views\datamanage\citylvdao\detailPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 查看其他绿道信息对话框 -->
  <div class="app-container">
    <!-- 基础信息 -->
    <el-row class="content-row">
      <el-col :span="24" class="title-row">
        <span>| 详细信息</span>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-descriptions
          :column="2"
          border
          :contentStyle="contentStyle"
          :labelStyle="labelStyle"
          size:small
        >
          <el-descriptions-item>
            <template slot="label"> OBJECTID </template>
            {{ formData.objectid }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 名称 </template>
            {{ formData.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 地址 </template>
            {{ formData.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 绿地长度(m) </template>
            {{keepdecimalpoint(formData.slen,2)}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 绿道宽度(m) </template>
            {{ formData.swidth }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 绿道所在绿地面积(㎡) </template>
            {{ formData.sarea }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 填报人 </template>
            {{ formData.collector }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 填报时间 </template>
            {{ this.localDate(formData.collecttime) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            {{ formData.remark }}
          </el-descriptions-item>
        </el-descriptions>
        </el-row>
      </el-col>
    </el-row>
    <div class="footer">
      <el-button
        v-if="formData.hczt =='75'"
        type="success"
        plain
        icon="el-icon-check"
        @click="confirmstatus"
      >确认</el-button>
      <el-button
        type="primary"
        plain
        icon="el-icon-circle-close"
        @click="cancel"
      >关 闭</el-button>
    </div>
  </div>
</template>

<script>
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js";
import Sketch from "@arcgis/core/widgets/Sketch";
import { mapActions, mapGetters } from "vuex";

export default {
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  inject: ["toggleComponent"],
  data() {
    return {
      // 内容样式
      contentStyle: {
        "text-align": "left",
        // "min-width": "320px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      // label样式
      labelStyle: {
        // width: "100px",
        "text-align": "left",
        // "min-width": "120px",
        "background-color": "#e7f6f3",
      },
      // 修改表单参数
      formData: {},
      // 查询图层
      featureLayer: null,
      feature: undefined,
      selectedGraphic: undefined,
    }
  },
  computed: { ...mapGetters(["nickName", "deptId"]) },
  activated() {
    console.log(this.paramObj.feature);
    this.feature = this.paramObj.feature;
    this.formData = this.feature.attributes;
    this.featureLayer = this.paramObj.featureLayer;
    this.selectedGraphic = this.paramObj.selectedGraphic;
    this.layerView = this.paramObj.layerView;
  },
  methods: {
    ...mapActions("map", ["setHighlight", "removeHighlight", "cleanHighlight"]),
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:rgb(28 133 195 / 20%);";
      }
    },
    // 格式化日期
    localDate(time) {
      if (time == null) return "";
      var localTime = this.$moment
        .parseZone(time)
        .local()
        .format("YYYY-MM-DD HH:mm:ss");
      //   console.log(localTime);
      return localTime;
    },
    // 保留小数点
    keepdecimalpoint(val1,val2){
      return Number(val1).toFixed(val2);
    },
    cancel() {
      this.removeHighlight("roadld_highlight");
      this.toggleComponent("dataPanel");
    },
    confirmstatus(){
      let _self = this;
        // 核查状态改为0
        _self.feature.attributes.hczt = 0;
        _self.feature.attributes.collecttime = Date.now();
        _self.feature.attributes.collector = _self.nickName;
        const edits = {
          updateFeatures: [_self.feature],
        };
        // 更新要素
        _self.featureLayer.applyEdits(edits).then(() => {
          _self.$message.success("修改成功");
          // 退出
          _self.cancel();
        });


    },
  },
}
</script>
<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #11a983;
  margin-bottom: 1vh;
}

.content-row {
  margin-bottom: 1vh;
}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  color: #11a983;
}

.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}
</style>
